<template>
    <div class="mui-numbox" data-numbox-min='1' style="height:25px" >
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" class="mui-input-numbox" type="number" :value="initcount"
        @change="countChanged" ref="numbox" readonly />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>


</template>

<script>
    import mui from '../../lib/mui/js/mui.min.js'
    import {Toast} from 'mint-ui'
    export default {
        data() {
            return {
                userId: this.$store.state.userId
            }
        },
        mounted() {
            //初始化数字选择框
            mui('.mui-numbox').numbox();
        },
        methods: {
            countChanged() {
                console.log(this.$refs.numbox.value)
                this.$store.commit('updateGoodsInfo',{ 
                    commodityId:this.commodityId,
                    commodityQuantity:this.$refs.numbox.value})
                this.$http.get("front/car/"+this.userId+
                                "/goods/"+this.commodityId+
                                "/quantity/"+this.$refs.numbox.value).then(result =>{
                        if(result.body.code === 1) {
                            Toast("修改数量成功")
                        }else{
                        Toast('与服务器断开连接')
                    }
                })
            }
        },
        props: ["initcount","commodityId"]
    }
</script>

<style lang="scss" scoped>

</style>